<template>
  <div id="particles-js" class="login-container">
    <vue-particles class=""
                   color="#7b7d7d"
                   :particle-opacity="0.7"
                   :particles-number="60"
                   shape-type="circle"
                   :particle-size="4"
                   lines-color="#fff"
                   :lines-width="1"
                   :line-linked="true"
                   :line-opacity="0.4"
                   :lines-distance="100"
                   :move-speed="2"
                   :hover-effect="true"
                   hover-mode="grab"
                   :click-effect="true"
                   click-mode="push"/>
    <div class="login-wrapper d-flex fs-1">
      <div class="flex-3 m-2 b-radius-1 login-img" style="color: white; overflow: hidden">
        <div v-for="each in 50" :key="each">这里是简介, Logo</div>
      </div>
      <div class="flex-2 m-2 b-radius-1 p-2" style="background: white">
        <h1 class="t-left">登录元数据引擎</h1>
        <div class="fs-1 t-left">XXXX Data Engine</div>
        <el-form ref="ruleForm" :model="form" status-icon :rules="formRules" size="medium" class="mt-1">
          <el-form-item label="" prop="username">
            <el-input v-model="form.pass"/>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input v-model="form.pass" type="password" autocomplete="off"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       style="width: 100%"
                       @click="handleLogin('ruleForm')">登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import particlesJS from 'particles.js'
// import particlesConfig from './particles-js-conf.json'

export default {
  name: 'Login',
  data() {
    return {
      form: {},
      formRules: {},
      redirect: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
    // window.particlesJS.load('particles-js', particlesConfig, _ => {
    // })
  },
  methods: {
    handleLogin() {
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      this.$store.dispatch('user/login', this.form)
        .then(() => {
          this.$router.push({
            path: this.redirect || '/',
            query: this.otherQuery
          })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
      // } else {
      //   console.log('error submit!!')
      //   return false
      // }
      // })
    },
    getOtherQuery(query) {
      return Object.keys(query)
        .reduce((acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .login-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #38394f;
    background-image: url(../../assets/images/login-bg.png);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;

    .login-wrapper {
      height: 450px;
      width: 920px;
      top: calc((100vh - 450px) / 2);
      position: absolute;
      left: calc((100vw - 920px) / 2);

      .login-img {
        background-image: url(../../assets/images/login-img.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
</style>
